<!-- 管理员:课程考核管理:题库和在线考试管理:试题库管理 -->
<template>
  <div style="width:100% !important;">
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="4">
            <el-form label-position="right"
                     label-width="100px"
                     label-suffix="：">
              <el-form-item label="课程名称"
                            prop="clazz.kcmc">
                <el-input v-model="clazz.kcmc"
                          placeholder="请输入内容"
                          size="mini"></el-input>
              </el-form-item>

            </el-form>
          </el-col>
          <el-col :span="4">
            <el-form label-position="right"
                     label-width="100px"
                     label-suffix="：">
              <el-form-item label="课程编码"
                            prop="clazz.kcbm">
                <el-input v-model="clazz.kcbm"
                          placeholder="请输入内容"
                          size="mini"></el-input>
              </el-form-item>

            </el-form>
          </el-col>
          <el-col :span="10">
            <div class="buttons-container-1">
              <el-button size="mini"
                         type="primary"
                         plain
                         @click='query()'
                         icon="el-icon-search">查询</el-button>
              <el-button @click="onCreateClassClickHandler()"
                         size="mini"
                         type="danger"
                         plain
                         icon="el-icon-circle-plus-outline">新建课程</el-button>
              <el-button @click="onchapterMaintenance()"
                         size="mini"
                         type="danger"
                         plain><img class="myimg"
                     src='../../../../../../public/img/icon/weihu.png'
                     alt=""> 章节维护</el-button>
              <el-button @click="onClicktixing()"
                         size="mini"
                         type="danger"
                         plain
                         icon="el-icon-setting">题型设置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-container>
      <el-main>
        <el-table :data="tableData"
                  border
                  class="xpaas-table-class"
                  row-class-name="xpaas-row-class"
                  cell-class-name="xpaas-cell-class"
                  header-row-class-name="xpaas-header-row-class"
                  header-cell-class-name="xpaas-header-cell-class"
                  @row-dblclick="onClassTableDbClickHandler">
          <el-table-column type="selection"
                           width="55"
                           align="center"></el-table-column>
          <el-table-column prop="kcbm,kcmc"
                           label="课程【课程编码】"
                           align="center"
                           width="400"><template slot-scope="scope">
              {{scope.row.kcmc}}【{{scope.row.kcbm}}】
            </template></el-table-column>
          <el-table-column prop="stkmc"
                           label="试题库"
                           align="center"></el-table-column>
          <el-table-column prop="guideitemrank"
                           label="操作"
                           align="center"
                           width="300">
            <template slot-scope="scope">
              <el-row>
                <el-col :span="8">
                  <el-button :plain=true
                             @click="onReviewClassClickHandler(scope.row.id)"
                             size="mini"
                             type="primary"
                             icon="el-icon-document">详情</el-button>
                </el-col>
                <el-col :span="8">

                  <el-button :plain=true
                             size="mini"
                             type="danger"
                             icon="el-icon-delete"
                             @click="deletel(scope.row.id)">删除</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button :plain=true
                             @click="onModifyClassClickHandler(scope.row)"
                             size="mini"
                             type="success"
                             icon="el-icon-edit">修改</el-button>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>

      </el-main>
    </el-container>
    <el-dialog :title="chapterMaintenance.dialogTitle"
               :visible.sync="chapterMaintenance.dialogFormVisible"
               :close-on-click-modal=false
               :show-close=false
               :center=true
               :close-on-press-escape=false>
      <el-container>
        <el-main>
          <el-col :span="2"><span>&nbsp;</span></el-col>
          <el-col :span="20">
            <div class="addzijied">
              <el-button plain
                         type="warning"
                         icon="el-icon-circle-plus-outline"
                         @click="chapterMaintenance.dialogFormVisible = false"
                         size="mini">新增子节点</el-button>
              <el-button plain
                         type="danger"
                         size="mini"
                         :current-node-key=currentnodekey
                         icon="el-icon-delete"
                         @click="deleteZJ">删除此章节</el-button>
            </div>
            <el-form>
              <el-tree ref="tree"
                       :data="chapterMaintenance.data"
                       :props="chapterMaintenance.defaultProps"
                       node-key="id"
                       show-checkbox
                       @node-click="handleNodeClick"></el-tree>
            </el-form>
          </el-col>
          <el-col :span="2"><span>&nbsp;</span></el-col>
        </el-main>
      </el-container>
      <div slot="footer">
        <el-button plain
                   type="warning"
                   @click="chapterMaintenance.dialogFormVisible = false">保存</el-button>
        <el-button plain
                   type="danger"
                   @click="chapterMaintenance.dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="clazzDialog.dialogTitle"
               :visible.sync="clazzDialog.dialogFormVisible"
               :close-on-click-modal=false
               :show-close=false
               :center=true
               :close-on-press-escape=false>
      <el-container>
        <el-main>
          <el-col :span="2"><span>&nbsp;</span></el-col>
          <el-col :span="20">
            <el-form>
              <div class="el-table dialogFormTableBorder">
                <table class="dialogFormTable">
                  <tr>
                    <td class="formLabel">课程名称：</td>
                    <td class="formItem">
                      <el-input v-model="clazzDialog.data.kcmc"
                                size="mini"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="formLabel">课程编码：</td>
                    <td class="formItem">
                      <el-input v-model="clazzDialog.data.kcbm"
                                size="mini"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="formLabel">试 题 库：</td>
                    <td class="formItem">
                      <el-input v-model="clazzDialog.data.stkmc"
                                size="mini"></el-input>
                    </td>
                  </tr>
                </table>
              </div>
            </el-form>
          </el-col>
          <el-col :span="2"><span>&nbsp;</span></el-col>
        </el-main>
      </el-container>
      <div slot="footer">
        <el-button plain
                   type="warning"
                   @click="baocun">保存</el-button>
        <el-button plain
                   type="danger"
                   @click="clazzDialog.dialogFormVisible = false ">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="txszDialog.dialogTitle"
               :visible.sync="txszDialog.dialogFormVisible"
               :close-on-click-modal=false
               :show-close=false
               :center=true
               :close-on-press-escape=false>
      <el-container>
        <el-main>
          <el-col :span="2"><span>&nbsp;</span></el-col>
          <el-col :span="20">
            <el-form>
              <div class="el-table dialogFormTableBorder">
                <table class="dialogFormTable">
                  <tr>
                    <td class="txformLabel">题型类型：</td>
                    <td class="formItem">
                      <el-select v-model="txszDialog.data.txlx"
                                 placeholder="请选择">
                        <el-option v-for="item in txszDialog.options"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td class="txformLabel">题型自定义名称：</td>
                    <td class="formItem">
                      <el-input v-model="txszDialog.data.txmc"
                                size="mini"></el-input>
                    </td>
                  </tr>
                </table>
              </div>
            </el-form>
          </el-col>
          <el-col :span="2"><span>&nbsp;</span></el-col>
        </el-main>
      </el-container>
      <div slot="footer">
        <el-button plain
                   type="warning"
                   @click="txbaoc">保存</el-button>
        <el-button plain
                   type="danger"
                   @click="txszDialog.dialogFormVisible = false ">取消</el-button>
      </div>
    </el-dialog>
    <div class="search-result-desc-panel">
      <span>共找到 {{ searchResultPagin.total }} 条记录，当前显示 {{
          (searchResultPagin.total > 0) ? ((searchResultPagin.currentPage - 1) * searchResultPagin.perpageCount + 1) : (0)
          }} - {{
          (((searchResultPagin.perpageCount*searchResultPagin.currentPage)-searchResultPagin.total) > 0) ?  (searchResultPagin.total):(searchResultPagin.currentPage * searchResultPagin.perpageCount) 
          }} 条记录。</span>
    </div>
    <div class="search-result-pagin-panel">
      <el-pagination @size-change="onPerpageSizeChangeHandler"
                     @current-change="onCurrentPageNoChangeHandler"
                     :current-page="searchResultPagin.currentPage"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="searchResultPagin.perpageCount"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="searchResultPagin.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import mymsg from '@/api/msg.js'
import {
  getQuestionlist,
  setQuestionupdate,
  setQuestionmove,
  setQuestionSave,
  setaddquestiontype,
  getchaptersByAll,
  SetremoveZJ,
} from '@/api/examinations/gitlist'

import { Message } from 'element-ui'
export default {
  data() {
    return {
      txszDialog: {
        dialogTitle: '题型设置',
        dialogFormVisible: false,
        options: [
          {
            value: 1,
            label: '单选题',
          },
          {
            value: 2,
            label: '多选题',
          },
          {
            value: 3,
            label: '填空题',
          },
          {
            value: 4,
            label: '判断题',
          },
          {
            value: 5,
            label: '简答题',
          },
          {
            value: 6,
            label: '论述题',
          },
        ],
        data: { txmc: '', txlx: '' },
      },
      zjdata: '',
      chapterMaintenance: {
        dialogFormVisible: false,
        dialogTitle: '章节维护',
        data: [],
        defaultProps: {
          children: 'children',
          label: 'zjmc',
        },
      },
      searchResultPagin: {
        total: 1000,
        perpageCount: 10,
        currentPage: 1,
        currentStart: 31,
        currentEnd: 40,
      },
      clazzDialog: {
        dialogFormVisible: false,
        dialogTitle: '新增课程',
        data: {},
      },
      clazz: { kcmc: '', kcbm: '' },
      tableData: [],
      currentnodekey: '',
    }
  },
  created() {
    this.getQuestionlist()
  },
  methods: {
    deleteZJ() {
      let arr = []
      this.$refs.tree.getCheckedKeys().forEach((e) => {
        if (e !== undefined) {
          arr.push(e)
        }
      })
      let string = arr.join(',')
      SetremoveZJ(string).then((res) => {
        console.log(res)
        mymsg('删除', res)
        // this.currentnodekey = null
        this.chapterMaintenance.dialogFormVisible = false
      })
    },
    txbaoc() {
      setaddquestiontype(this.txszDialog.data).then((res) => {
        mymsg('设置', res)
        this.txszDialog.dialogFormVisible = false
      })
    },
    onClicktixing() {
      this.txszDialog.dialogFormVisible = true
    },

    mymsg(x, res) {
      if (res.data.code == 200) {
        Message({
          message: x + '成功',
          type: 'success',
        })
      } else {
        Message({
          message: x + '失败',
          type: 'success',
        })
      }
    },

    deletel(id) {
      console.log(id, '获取的id')
      setQuestionmove(id).then((res) => {
        this.mymsg('删除', res)
        this.getQuestionlist()
      })
    },
    query() {
      this.getQuestionlist(this.clazz)
    },
    baocun() {
      let simplePerson = JSON.parse(
        JSON.stringify(this.clazzDialog.data, ['id', 'stkmc', 'kcmc', 'kcbm'])
      )
      if (this.clazzDialog.dialogTitle == '修改课程') {
        console.log(simplePerson)
        setQuestionupdate(simplePerson).then((res) => {
          this.mymsg('修改', res)
          this.getQuestionlist()
          this.clazzDialog.dialogFormVisible = false
        })
      } else {
        setQuestionSave(simplePerson).then((res) => {
          this.mymsg('新增', res)
          this.getQuestionlist()
          this.clazzDialog.dialogFormVisible = false
        })
      }
    },
    getQuestionlist(data) {
      getQuestionlist(
        this.searchResultPagin.currentPage,
        this.searchResultPagin.perpageCount,
        data
      ).then((res) => {
        this.searchResultPagin.total = res.data.data.total
        this.tableData = res.data.data.records
        console.log(res.data.data, 'list')
      })
    },
    onchapterMaintenance() {
      //   console.log(this.chapterMaintenance.data)

      getchaptersByAll().then((res) => {
        let resdata = res.data.data
        console.log(resdata)
        let resarr = []
        resdata.forEach((element) => {
          element = {
            // id: element.itempool.id,
            zjmc: element.itempool.kcmc + '【' + element.itempool.kcbm + '】',
            children: [element.chapters],
          }
          resarr.push(element)
          //   console.log(element)
        })
        console.log(resarr, '88888888')
        this.chapterMaintenance.data = resarr
      })

      this.chapterMaintenance.dialogFormVisible = true
    },
    rightKeyGroup: '',

    onCurrentPageNoChangeHandler: function (pPageNo) {
      this.searchResultPagin.currentPage = pPageNo
      this.getQuestionlist()
    },
    onPerpageSizeChangeHandler: function (pPageSize) {
      this.searchResultPagin.perpageCount = pPageSize
      this.getQuestionlist()
    },
    onCreateClassClickHandler() {
      this.clazzDialog.data = { id: null, stkmc: null, kcmc: null, kcbm: null }
      this.clazzDialog.dialogTitle = '新增课程'
      this.clazzDialog.dialogFormVisible = true
    },
    onReviewClassClickHandler(id) {
      this.$router.push({
        name: '试题库详情',
        query: {
          id: id,
        },
      })
    },
    onModifyClassClickHandler(x) {
      this.clazzDialog.dialogTitle = '修改课程'
      this.clazzDialog.data = x
      this.clazzDialog.dialogFormVisible = true
    },
    onClassTableDbClickHandler() {
      Message({
        message: '跳转详情页',
      })
      this.$router.push(
        '/admin/courseAssessment/questionExamination/questions/clazzQuestions'
      )
    },
  },
}
</script>

<style lang="less" scoped>
</style>

<style lang="less" scoped>
@import '../../courseAssessmentScoped.less';
@import '../../exportBtn.less';
.myimg {
  margin-right: 3px;
}
.txformLabel {
  width: 40%;
  line-height: 20vh;
  background-color: #ecf2fb;
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Microsoft YaHei';
  text-align: right;
  padding: 0px 20px;
}
.search-result-desc-panel {
  font-size: 14px;
  font-weidth: normal;
  font-family: @fontFamily;
  color: #004ca7;
  margin: 15px 0 0 0;
}
.buttons-container-1 {
  width: 550px;
  line-height: 38px;
  //   margin: 0px 10px;
  text-align: center;
}
.search-result-pagin-panel {
  text-align: right;
}
.buttons-container-1 > button.el-button {
  margin: 0px 10px;
  height: 28px;
}
div.dialogFormTableBorder {
  border: 1px solid #004ca7;
  border-radius: 9px;
  border-spacing: 1;
}
table.dialogFormTable {
  width: 100%;
  background-color: yellow;
}
table.dialogFormTable td.formLabel {
  width: 40%;
  line-height: 60px;
  background-color: #ecf2fb;
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Microsoft YaHei';
  text-align: right;
  padding: 0px 20px;
}
table.dialogFormTable td.formItem {
  width: 60%;
  line-height: 38px;
  background-color: #ffffff;
  color: #004ca7;
  text-align: left;
  padding: 0px 20px;
}
table.dialogFormTable td {
  border-spacing: 1;
  border-right: 1px solid #004ca7;
  border-bottom: 1px solid #004ca7;
}
.addzijied {
  margin: 10px;
}
</style>
